<template>
	<view class="page">
		<prompt ref="prompt" @onConfirm="onConfirmPrompt" @onCancel="onCancelPrompt" :title="promptTitle" :text="promptText"></prompt>
		<view class="user-box">
			<view class="head-out">
				<view class="user-head">
					<view class="left-out">
						<image :src="userInfo.icon" class="head-img" mode="" @tap="changeHeadImg"></image>
					</view>
					<view class="head-title">点击修改头像</view>
				</view>
			</view>
		</view>
		
		<view class="order-out">
			<view class="item-box">
				<view class="box-item">
					<view class="item-in">
						<view class="item-left">
							<view class="item-title">用户ID</view>
							
						</view>
						<view class="item-right">
							<view class="">{{userInfo.id}}</view>
						</view>
					</view>
				</view>
				<view class="box-item">
					<view class="item-in">
						<view class="item-left">
							<view class="item-title">昵称</view>
						</view>
						<view class="item-right">
							<view class="">{{userInfo.nickname}}</view>
							<view class="right-icon iconfont icon-arr-right" @tap="modifyInfo('昵称','nickname')"></view>
						</view>
					</view>
				</view>
				<view class="box-item">
					<view class="item-in">
						<view class="item-left">
							<view class="item-title">性别</view>
							<radio-group @change="radioChange" class="gender">
								<label class="radio" v-for="(item, ind) in items" :key="ind">
									<radio :value="item.value" :checked="item.value == userInfo.gender"/>{{item.name}}
								</label>
							</radio-group>
						</view>
					</view>
				</view>
				<view class="box-item">
					<view class="item-in">
						<view class="item-left" style="width: 100%;">
							<view class="item-title" style="flex-shrink: 0;">生日</view>
						</view>
						<view class="item-right">
							<picker mode="date" @change="dateChange" class="timepicker">
								<view class="right-box">{{userInfo.birthday}}</view>
							</picker>
							<view class="right-icon iconfont icon-arr-right"></view>
						</view>
					</view>
				</view>
				<view class="box-item">
					<view class="item-in">
						<view class="item-left">
							<view class="item-title" style="flex-shrink: 0;">城市</view>
						</view>
						<view class="item-right">
							<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault"
							 @onCancel="onCancel" @onConfirm="onConfirm">
							</mpvue-city-picker>
							<view class="right-box">{{pickerText}}</view>
							<view class="right-icon iconfont icon-arr-right" @click="showMulLinkageThreePicker"></view>
						</view>
					</view>
				</view>
				<view class="box-item">
					<view class="item-in">
						<view class="item-left">
							<view class="item-title">职业</view>
						</view>
						<view class="item-right">
							<view class="right-box">{{userInfo.job}}</view>
							<view class="right-icon iconfont icon-arr-right" @tap="modifyInfo('职业','job')"></view>
						</view>
					</view>
				</view>
				<view class="box-item">
					<view class="item-in">
						<view class="item-left">
							<view class="item-title">个性签名</view>
						</view>
						<view class="item-right">
							<view class="right-box">{{userInfo.personalizedSignature}}</view>
							<view class="right-icon iconfont icon-arr-right" @tap="modifyInfo('签名','personalizedSignature')"></view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="like">喜欢的分类</view>
			
			<view class="button-box">
				<view class="buttons">
					<button class="button" :type="button.button" v-for="(button, ind) in buttons" :key="ind" @tap="tapButton(button)">{{button.title}}</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import mpvueCityPicker from '../../../components/mpvue-citypicker/mpvueCityPicker.vue'
	import prompt from '../../../components/prompt/prompt.vue'
	
	export default {
		data() {
			return {
				userInfo: {
					nickname: '',
					gender: 0,
					birthday: '',
					personalizedSignature: '',
					job: '',
					city: '',
					icon: '',
					classTag: []
				},
				cityPickerValueDefault: [0, 0, 1],
				themeColor: '#007AFF',
				pickerText: '',
				promptTitle: '',
				promptText: '',
				infoType: '',
				items: [{value: '1',name: '男'},{value: '2',name: '女'}],
				buttons: [{'id': 1, 'title': '服装', 'button' : 'none'},{'id': 2, 'title': '餐厨', 'button' : 'none'},
					{'id': 3, 'title': '配件', 'button': 'none'},{'id': 4, 'title': '居家', 'button': 'none'},
					{'id': 5, 'title': '洗护', 'button': 'none'},{'id': 6, 'title': '婴童', 'button': 'none'},
					{'id': 7, 'title': '杂志', 'button': 'none'},{'id': 8, 'title': '饮食', 'button': 'none'}]
			}
		},
		onShow() {
			this.userInfo = this.getGlobalUser("globalUser");
			this.pickerText = this.userInfo.city;
		},
		onNavigationBarButtonTap(e) {
			var index = e.index;
			var me= this;
			if (index == 0){
				var me = this;
				var globalUser = me.getGlobalUser("globalUser");
				
				uni.showLoading({
					mask: true,
					title: "保存中，请稍后..."
				});
				this.userInfo.city = this.pickerText;
				var member = {"umsMemberStr": JSON.stringify(this.userInfo)};
				uni.uploadFile({
					url: me.serverUrl + "/member/comepleteInfo",
					fileType: "image",
					filePath: this.userInfo.icon,
					formData: member,
					name: "file",
					header: {
						"headerUserId": globalUser.id,
						"headerUserToken": globalUser.userToken
					},
					success(res) {
						// debugger;
						var resDataStr = res.data;
						// console.log(typeof(resDataStr));
						var resData = JSON.parse(resDataStr);
						// console.log(typeof(resData));
						if (resData.resultCode == 0) {
							// 获得最新的用户数据
							var userInfo = resData.resultData;
							uni.setStorageSync("globalUser", userInfo);
							uni.switchTab({
								url: '../user'
							})
						} else if (resData.resultCode == 1) {
							uni.showToast({
								title: res.resultData.resultDesc,
								image: "../../static/mall/error.png",
								duration: 2000
							})
						}
					},
					complete() {
						uni.hideLoading();
					}
				})
			}
		},
		methods: {
			tapButton(item){
				if(this.userInfo.classTag.indexOf(item.id) >= 0){
					this.userInfo.classTag = this.userInfo.classTag.splice(this.userInfo.classTag.indexOf(item.id) + 1,1);
					item.button = 'none';
				}else {
					this.userInfo.classTag.push(item.id);
					item.button = 'primary';
				}
				console.log(this.userInfo.classTag)
			},
			showPrompt(){
				this.$refs.prompt.show();
			},
			dateChange(e) {
				this.userInfo.birthday = e.detail.value;
			},
			onCancel(e) {
				console.log(e);
			},
			onConfirm(e) {
				this.pickerText = JSON.stringify(e);
				this.pickerText = e.label;
			},
			// 三级联动选择
			showMulLinkageThreePicker() {
				this.$refs.mpvueCityPicker.show();
			},
			modifyInfo(title, info){
				this.promptTitle = title;
				this.infoType = info;
				this.showPrompt();
			},
			onConfirmPrompt(e){
				this.$refs.prompt.hide();
				switch (this.infoType){
					case 'nickname':
						this.userInfo.nickname = e
						break;
					case 'job':
						this.userInfo.job = e
						break;
					case 'personalizedSignature':
						this.userInfo.personalizedSignature = e
						break;
					default:
						break;
				}
			},
			onCancelPrompt(){
				this.$refs.prompt.hide();
				this.$refs.prompt.cost = '';
			},
			radioChange(evt) {
				this.userInfo.gender = evt.detail.value
				console.log(this.userInfo.gender)
			},
			changeHeadImg(){
				var me = this;
				uni.chooseImage({
					count: 1,
					sizeType: ["compressed"],
					sourceType: ["album"],
					success(res) {
						// 获得临时路径
						var tempFilePath = res.tempFilePaths[0];
						uni.uploadFile()
						me.userInfo.icon = tempFilePath;
					}
				})
			}
		},
		components: {
			mpvueCityPicker,
			prompt
		}
	}
</script>

<style>
	@import url("person.css");
	@import url("../../../static/iconfont/iconfont.css");
</style>
